<template>
	<view class="index p10">
		<view class="money bf p-15-10 mb10 bs6">
			<view class="mb15">输入金额</view>
			<view @click="open" class="f-1">
				<u-input border="none" v-model="params.money" disabled :focus="isInputFocus" @blur='pp' @click="open">
					<u--text text="￥" slot="prefix" margin="0 3px 0 0" type="tips"></u--text>
				</u-input>
			</view>
		</view>
		<view class="bf item">
			<view class="flex f-bt br-b pb15">
				<view class="f-g-1 f-c c0" @click="vipCode"><text class="iconfont icon-mendianzitidaihexiaosvg mr5 sys c0"></text>会员码</view>
				<view class="line f-g-0"></view>
				<view class="f-g-1 f-c c0" @click="show = true"><text class="iconfont icon-youhuiquan mr5 f20 c0"></text>手机号查询</view>
			</view>
			<!-- <view class="flex">
				<view class="f-bt f-g-1 f-y-c mt15"  v-if="payVip && payVip.id">
					<view class="mr5 flex f-y-c">
						用户信息：<view class="label flex" :style="{background:subColor,color:'#000'}">
						<text class="mr5">{{payVip.nickname}} </text>
						<u-icon name="close" color="#000" size="18" @click="cUser"></u-icon></view>
					</view>
					<view class="f12" :style="{color:'#FD8906'}">余额：{{payVip.account.balance}}</view>
				</view>
				<view class="c9 mt15" v-else>暂无用户信息</view>
			</view> -->
		</view>
		<view v-if="payVip && payVip.id" class="ydl p-15-20 f-bt f14">
			<view class="f-g-1 f-bt">
				<view class="f-g-1 flex f-y-c t-o-e">
					<u-avatar :src="payVip.avatar" size="38"></u-avatar>
					<view class="ml10">
						<view class="f16 wei">{{payVip.nickname}}-{{payVip.id}}</view>
						<view class="f12 mt5">{{payVip.mobile}}</view>
					</view>
				</view>
				<view class="f-g-0 mr10 f-xy-e yer pr10">
					<view class="f-xy-e">
						<view class="c9 f12">余额</view>
						<view class="c0 mt5 wei">￥{{payVip.account.balance}}</view>
					</view>
				</view>
			</view>
			<view class="f-g-0 f-y-c">
				<view class="tcbtn f12 f-c" @click="cUser">退出</view>
			</view>
		</view>
		<!-- <view class="f-bt xzhy p10" v-else>
			<view class="flex f-g-1">
				<view class="f14"><text class="mr5 iconfont c6 f14 icon-huiyuandengji-copy" :class="item.icon"></text>
				</view>
				<view class="f14 c0 f-1" @click="show = true">点击登录会员</view>
			</view>
			<view class="f-g-0 f-y-c" @click="show = true">
				<u-icon name="arrow-right" size="12"></u-icon>
			</view>
		</view> -->
		<view class="dbbtn bf p10 f-bt" v-if="params.money">
			<view>￥<text class="f28 wei">{{params.money}}</text></view>
			<view><u-button text="确认收款" size="large" :color="subColor" @click="pay" :customStyle="{color: '#000'}"></u-button></view>
		</view>
		<cuKeyboard ref="cukeyboard" @change="change" @confirm="confirm">
		</cuKeyboard>
		<u-modal :show="show" :negativeTop="200" title="会员查询" confirmText="查询" showCancelButton confirmColor="#FD8906"
			cancelColor="#000" @confirm="search" @cancel="show = false" @close="show = false"
			:closeOnClickOverlay="true" zoom>
			<view class="slot-content">
				<u--input v-model="phone" type="number" placeholderClass="inni" placeholderStyle="color:#c1c1c1"
					placeholder="请输入手机号" border="none"
					:customStyle="{'width':'100%','flex':1,'background': '#f6f6f6','padding': '10px 15px',}" clearable>
				</u--input>
			</view>
		</u-modal>
		<pay ref="Pay" :ps="params" :payVip="payVip" @changePay="changePay" @goPay="goPay"></pay>
		<!-- <u-popup :show="showPay" :round="10" @close="showPay=false" @open="showPay=true">
			<view class="p15 c0 f16">
				<view class="dfbc pb10 br-b">
					<text class="wei f12">支付金额</text>
					<text class="f14 " :style="{color:subColor}">￥{{params.money}}</text>
				</view>
				<view class="dfbc bb1 p-10-0">
					<u-radio-group v-model="params.payType" placement='column' iconColor="#000" iconPlacement='right'
						@change="changePay">
						<u-radio :activeColor="subColor" name="authCode" :labelSize="18" :iconSize="14":customStyle="{marginBottom: '50rpx'}">
							<text class="iconfont icon-mendianzitidaihexiaosvg mr5 sys" :style="{color:subColor}"></text>
							<text>扫码支付</text>
						</u-radio>
						<u-radio :activeColor="subColor" name="balance" :labelSize="18" :iconSize="14"
							:customStyle="{marginBottom: '50rpx'}">
							<text v-if="payVip && payVip.id">
								<text class="iconfont icon-mendianzitidaihexiaosvg mr5 sys" :style="{color:subColor}"></text>
								<text>扫码支付</text> 余额支付
								<text class="f12 c9 ml10" :style="{color: subColor}">{{(`余额:${payVip.account.balance}`)}}</text>
							</text>
							<text v-else>
								<text class="iconfont icon-mendianzitidaihexiaosvg mr5 sys" :style="{color:subColor}"></text>
								<text>扫码支付</text> 余额支付
							</text>
						</u-radio>
						<u-radio :activeColor="subColor" name="cash" :labelSize="18" :iconSize="14" :customStyle="{marginBottom: '50rpx'}">
							<text class="iconfont icon-mendianzitidaihexiaosvg mr5 sys" :style="{color:subColor}"></text>现金支付
						</u-radio>
					</u-radio-group>
				</view>
				<view>
					<u-button text="立即支付" :color="subColor" @click="goPay"
						:customStyle="{borderRadius: '60rpx',height:'100rpx',color:'#000'}"
						:disabled="!params.payType || (params.payType == 'authCode' && !params.authCode || params.payType == 'balance' && !payVip.id)">
					</u-button>
				</view>
			</view>
		</u-popup> -->
		<member ref="memberRef" @chooseMember="chooseMember" />
	</view>
</template>

<script>
	import cuKeyboard from '@/components/cu-keyboard/cu-keyboard.vue'
	import pay from '@/components/pay/pay.vue'
	import member from '@/components/user/member.vue';
	export default {
		components: {
			cuKeyboard,
			pay,
			member,
		},
		data() {
			return {
				subColor: uni.getStorageSync('subject_color'),
				value: '',
				confirmStyle: {
					backgroundColor: uni.getStorageSync('subject_color'),
				},
				activeNum: 1,
				isInputFocus: false,
				show: false,
				phone: '',
				payVip: {},
				params: {
					payType: 0,
					money: '',
					userId: 0,
					authCode: '',
					costomPayId: 0,
				},
				showPay: false,
			}
		},
		onLoad() {
			this.confirmStyle.backgroundColor = this.subColor
			this.open()
			// this.firstChange()
		},
		watch: {
			isInputFocus(newval) {
				console.log('123123:', this.isInputFocus);
			}
		},
		methods: {
			change(e) {
				this.params.money = e;
				console.log("数字改变", e);
			},
			open() {
				this.$nextTick(() => this.$refs.cukeyboard.open())
			},
			pp(){},
			confirm(e) {
				console.log("付款", e);
			},
			hide() {
				console.log("关闭键盘")
			},
			tabChange(i) {
				this.activeNum = i
			},
			firstChange() {
				setTimeout(() => {
					this.isInputFocus = true; // this.secondFocus 是第二个文本框的 focus 属性。
				}, 0)
			},
			async pay() {
				this.$refs['Pay'].open(this.params)
			},
			async goPay() {
				let {
					msg,
					data
				} = await this.beg.request({
					url: this.api.personPay,
					method: "POST",
					data: this.params,
				})
				uni.showToast({
					title: msg,
					icon: 'none',
					duration: 3000
				});
				if (data) {
					this.$refs['Pay'].close()
					this.payVip = {}
					this.params.money = ''
					this.params.payType = 0
					this.open()
				}
			},
			async search() {
				const reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
				if (this.phone) {
					uni.showLoading({
						title: 'loading...'
					})
					let {
						data
					} = await this.beg.request({
						url: this.api.cMember,
						data: {
							mobile: this.phone
						},
					})
					if (data && data.list.length && data.list[0].id) {
						if (data.list.length > 1) {
							this.$refs['memberRef'].open(data.list)
						} else {
							this.show = false
							this.payVip = data.list[0]
							this.params.userId = data.list[0].id
							this.phone = ''
							console.log(this.payVip)
						}
					} else {
						uni.$u.toast('暂未查到用户信息');
					}
					uni.hideLoading()
				} else {
					uni.$u.toast('请输入正确的手机号');
				}
			},
			chooseMember(e) {
				this.show = false
				this.payVip = e
				this.params.userId = e.id
				this.phone = ''
				console.log(this.payVip)
			},
			vipCode() {
				var that = this
				uni.scanCode({
					onlyFromCamera: true,
					success: async function(res) {
						uni.showLoading({
							title: 'loading...'
						})
						if (res.result) {
							that.searchUser(res.result)
						} else {
							uni.hideLoading()
						}
					},
				});
			},
			async searchUser(code) {
				if (code) {
					uni.showLoading({
						title: 'loading...'
					})
					let {
						data
					} = await this.beg.request({
						url: this.api.cMember,
						data: {
							qrcode: code
						},
					})
					if (data && data.list.length && data.list[0].id) {
						this.show = false
						this.payVip = data.list[0]
						this.params.userId = data.list[0].id
						console.log(this.payVip)
					} else {
						uni.$u.toast('暂未查到用户信息');
					}
					uni.hideLoading()
				} else {
					uni.$u.toast('请输入正确的手机号');
				}
			},
			cUser() {
				this.payVip.id = 0
				this.payVip = {}
			},
			changePay(e) {
				if (e == 'authCode') {
					this.show = false
					this.params.payType = 'authCode'
					var that = this
					uni.scanCode({
						onlyFromCamera: true,
						success: async function(res) {
							uni.showLoading({
								title: 'loading...'
							})
							if (res.result) {
								that.params.authCode = res.result
								that.goPay()
							} else {
								uni.hideLoading()
							}
						},
					});
				} else if (e == 'balance') {
					this.params.payType = 'balance'
					if (this.payVip && !this.payVip.id) {
						this.show = true
					}
				} else if (e == 'cash') {
					this.show = false
					this.params.payType = 'cash'
				}else{
					this.params.payType = 'costomPay'
					this.params.costomPayId = e
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.iconfont {
		font-size: 38rpx !important;
	}

	.sys {
		font-size: 46rpx !important;
	}

	/deep/.u-text__value {
		font-size: 24px !important;
		color: #000 !important;
		font-weight: 600 !important;
	}

	// /deep/.paybut {
	// 	background: #49c265 !important;
	// }

	/deep/.money {
		.u-input {
			background-color: #fff !important;
		}

		.u-input__content__field-wrapper__field {
			font-size: 26px !important;
			color: #000 !important;
			font-weight: 600 !important;
		}
	}

	/deep/.u-button__text {
		font-size: 20px !important;
	}

	/deep/.u-modal__title {
		color: #000 !important;
		font-size: 16px !important;
	}

	/deep/.u-modal__content {
		padding: 12px 15px 25px 15px !important;
	}

	/deep/.inni {
		color: #c1c1c1 !important;
	}

	.slot-content {
		width: 100%;
	}

	.but {
		width: 48%;
	}

	.item {
		width: 100%;
		border-radius: 7px;
		padding: 30upx 20upx;
		background-color: #fff;
	}

	.line {
		height: 40rpx;
		width: 2rpx;
		background: #f5f5f5;
	}

	.dbbtn {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		padding-bottom: 24rpx;
	}

	.br-b {
		border-bottom: 2rpx solid #f5f5f5;
	}

	.label {
		background: #f5f5f5;
		border-radius: 8rpx;
		padding: 6rpx 20rpx;
		color: #fff;
	}
	.xzhy {
		background: #FFFBE8;
	}
	
	.ydl {
		background: linear-gradient(to bottom, #FEEFCE, #FEF8E8);
	
		.yer {
			border-right: 1px solid #ddd;
		}
		.tcbtn{
			width: 60px;
			height: 48rpx;
			background: #FD8906;
			color: #fff;
			border-radius: 30rpx;
		}
	}
	
	.f-xy-e {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		text-aling: right;
	}
	
	/deep/.u-input__content__field-wrapper__field{
		height: 40px !important;
	}
</style>